<template>
  <view class="my-remark">
	<uni-forms ref="form" @submit="submit" :rules="rules">
		<uni-forms-item label="姓名:" name="username">
			<input class="input" type="text" placeholder="请输入您的姓名" 
			@input="binddata('username',$event.detail.value)"/>
		</uni-forms-item>
		<uni-forms-item label="电话号码:" name="mobile">
			<input class="input" type="text" 
					placeholder="请输入您的电话号码" @input="binddata('mobile',$event.detail.value)" />
		</uni-forms-item>
		<uni-forms-item label="百度账号:" name="baiduName">
			<input class="input" type="text" 
					placeholder="请输入您的百度账号" @input="binddata('baiduName',$event.detail.value)" />
		</uni-forms-item>
		<label class="comment-label">个人描述：</label>
		<textarea v-model="description"  class="textarea"  
			placeholder="简单描述一下您的基本情况,将有助于平台管理员对您有基本的了解~ " />
		<button @click="submitForm">提交报名</button>
	</uni-forms>
  </view>
</template>

<script>
import {uniForms, uniFormsItem} from '@dcloudio/uni-ui'
import permision from "@/common/js/permission.js"
import {activityApply} from '@/api/activity.js'
import {getFoodByFilter} from '@/api/food.js'
import {addByFoodContent, addByFoodId} from '@/api/remark.js'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'create-remark',
  components: { uniForms, uniFormsItem },
  data() {
  	return {
		description: '',
		multiIndex: [-1, -1, -1],
		multiArray: [[], [], []],
		rules: {
			username: {// name 字段的校验规则
				rules:[{
						required: true,
						errorMessage: '请填写您的姓名！',
					},],
			},
			mobile: {
				rules:[{
						required: true,
						errorMessage: '请填写您的电话号码！',
					},
					// {
					// 	pattern: "/^1[0-9]{10}$/",
					// 	errorMessage: '请检查您的电话号码！',
					// },
					],
			},
			baiduName: {
				rules:[{
						required: true,
						errorMessage: '请填写您的百度账号！',
					},],
			},
		}
  	}
  },
  onLoad(option) {
	  this.activityId = option.activityId
  },
  computed:{
		...mapState(['userInfo', 'baseTarget']),
  },
  methods: {
	// 提交表单
	submit(e) {
		console.log(e)
		const {errors, value} = e.detail
		if(errors){return;}
		if(!this.description){
			uni.showToast({title:'请输入个人描述~', icon: 'none'}); return;
		}
		let pattern = /^((1[0-9]{10})|(([0-9]{3,4}-)?[0-9]{7,8}))$/
		if(!pattern.test(value.mobile)){
			uni.showToast({title:'请检查您的电话号码', icon: 'none'}); return;
		}
		const formData = {
			...value, 
			description: this.description, 
			userId: this.userInfo.id,
			activityId: this.activityId
		}
		console.log(formData)
		this.applyActivity(formData)
	},
	applyActivity(formData){
		activityApply(formData).then(res=>{
			if(res.code === 200){
				uni.showToast({title: res.message})
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 200
				})
			}else{
				uni.showToast({title: res.message, icon: 'none'})
			}
		}).catch(err=>{uni.showToast({title:'我们的网络出现了一点错误，请稍候再试~', icon: 'none'})})
	},
	submitForm(form) {
		// 手动提交表单
		this.$refs.form.submit()
	},
	error(e) {
		console.log(e.detail);
	},
	deleteImg(index){
		this.imageList.splice(index, 1)
	},
  }
}
</script>

<style lang='scss'>

/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
 page {
   background-color: #f5f5f5;
   padding: 10rpx;
 }
 button {
    margin-top: 10rpx;
    background-color: $theme-color;
    color: #ffffff;
    &::after{
      border: none;
    }
  }

  .comment-label{
		width: 210rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-indent: 20rpx;
  }
  

  /* 表单 */
  .input {
  	height: 60rpx;
  	padding: 15rpx 25rpx;
  	line-height: 50rpx;
  	font-size: 28rpx;
  	background: #FFF;
  	flex: 1;
  }
  .schoolInput{
		width: 550rpx;
		height: 60rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #FFF;
		flex: 1;
  }
  .textarea {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 28rpx;
		background: #FFF;
		height: 150rpx;
		width: 93%;
  }
</style>


